'use client'

import Link from 'next/link'
import { useState } from 'react'

interface Exercise {
  title: string
  description: string
  steps: string[]
  precautions: string[]
  imageUrl: string
}

const exercises: Exercise[] = [
  {
    title: '猫牛式',
    description: '这个动作可以帮助缓解腰部压力，改善脊柱灵活性。',
    steps: [
      '跪在垫子上，双手和双膝着地',
      '吸气时，抬头挺胸，腰部下沉',
      '呼气时，低头含胸，背部拱起',
      '重复 10-15 次'
    ],
    precautions: [
      '动作要缓慢，不要用力过猛',
      '如果感觉疼痛要立即停止',
      '保持呼吸均匀'
    ],
    imageUrl: '/images/cat-cow.jpg'
  },
  {
    title: '桥式运动',
    description: '强化臀部和核心肌群，减轻坐骨神经压力。',
    steps: [
      '仰卧，双膝弯曲，双脚平放在地面上',
      '收紧核心肌群，抬起臀部',
      '保持 5-10 秒',
      '缓慢放下，重复 10-15 次'
    ],
    precautions: [
      '不要过度拱起腰部',
      '保持颈部放松',
      '如果感觉不适要立即停止'
    ],
    imageUrl: '/images/bridge.jpg'
  },
  {
    title: '膝抱式',
    description: '缓解腰部紧张，改善血液循环。',
    steps: [
      '仰卧，双膝弯曲',
      '双手抱住一侧膝盖，轻轻拉向胸部',
      '保持 15-30 秒',
      '换另一侧重复'
    ],
    precautions: [
      '动作要轻柔',
      '不要用力拉扯',
      '保持呼吸平稳'
    ],
    imageUrl: '/images/knee-hug.jpg'
  }
]

export default function Exercises() {
  const [selectedExercise, setSelectedExercise] = useState<Exercise | null>(null)

  return (
    <main className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
      {/* 导航栏 */}
      <nav className="bg-white shadow-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex">
              <div className="flex-shrink-0 flex items-center">
                <h1 className="text-2xl font-bold text-blue-600">坐骨神经痛助手</h1>
              </div>
              <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                <Link href="/" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                  首页
                </Link>
                <Link href="/knowledge" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                  知识库
                </Link>
                <Link href="/ai-chat" className="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                  AI 对话
                </Link>
                <Link href="/exercises" className="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                  锻炼建议
                </Link>
              </div>
            </div>
          </div>
        </div>
      </nav>

      {/* 主要内容 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
            康复锻炼指南
          </h2>
          <p className="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
            通过科学的锻炼方法，缓解坐骨神经痛症状
          </p>
        </div>

        {/* 锻炼列表 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {exercises.map((exercise, index) => (
            <div
              key={index}
              className="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow cursor-pointer"
              onClick={() => setSelectedExercise(exercise)}
            >
              <div className="p-6">
                <h3 className="text-xl font-semibold text-gray-900 mb-2">
                  {exercise.title}
                </h3>
                <p className="text-gray-600 mb-4">{exercise.description}</p>
                <div className="flex justify-end">
                  <button className="text-blue-600 hover:text-blue-800 font-medium">
                    查看详情 →
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 锻炼详情弹窗 */}
        {selectedExercise && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
            <div className="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
              <div className="p-6">
                <div className="flex justify-between items-start mb-4">
                  <h3 className="text-2xl font-bold text-gray-900">
                    {selectedExercise.title}
                  </h3>
                  <button
                    onClick={() => setSelectedExercise(null)}
                    className="text-gray-500 hover:text-gray-700"
                  >
                    ✕
                  </button>
                </div>
                <p className="text-gray-600 mb-6">{selectedExercise.description}</p>
                
                <div className="mb-6">
                  <h4 className="text-lg font-semibold text-gray-900 mb-2">
                    练习步骤
                  </h4>
                  <ol className="list-decimal list-inside space-y-2 text-gray-600">
                    {selectedExercise.steps.map((step, index) => (
                      <li key={index}>{step}</li>
                    ))}
                  </ol>
                </div>

                <div>
                  <h4 className="text-lg font-semibold text-gray-900 mb-2">
                    注意事项
                  </h4>
                  <ul className="list-disc list-inside space-y-2 text-gray-600">
                    {selectedExercise.precautions.map((precaution, index) => (
                      <li key={index}>{precaution}</li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </main>
  )
} 